import React, { Component } from 'react'
import {Link,Route} from 'react-router-dom'
import Detail from './Detail'
export default class Messges extends Component {
    state={
        messges:[
            {id:'1',title:'新闻1'},
            {id:'2',title:'新闻2'},
            {id:'3',title:'新闻3'}

        ],
    }
    render() {
        const {messges} =this.state
        return (
            <div>
                <ul>
                    {
                        messges.map((item)=>{
                            return (
                                <li key={item.id}>
                                    {/* **params**参数 */}
                                    {/* <Link to={`/home/messges/detai/${item.id}/${item.title}`}>{item.title}</Link> &nbsp;&nbsp; */}
                                    
                                    {/* **search**传参 */}
                                    {/* <Link to={`/home/messges/detai/?id=${item.id}&title=${item.title}`}>{item.title}</Link> &nbsp;&nbsp; */}
                                
                                    {/* **state**传参 */}
                                    <Link to={{pathname:`/home/messges/detai`,state:{id:item.id,title:item.title}}}>{item.title}</Link> &nbsp;&nbsp;
                                </li>
                            )
                        })
                    }
                </ul>
                <hr></hr>
                {/* **params**参数 */}
                {/* <Route path="/home/messges/detai/:id/:title" component={Detail}/> */}

                {/* **search**传参 */}
                {/* <Route path="/home/messges/detai" component={Detail}/> */}

                {/* **state**传参 */}
                <Route path="/home/messges/detai" component={Detail}/>
            </div>
        )
    }
}
